<template>
  <div class="container">
    <div class="item-con flex mx-auto">
      <div class="item-img">
        <div class="block">
          <el-image
            :style="{ width: '100%', height: '100%' }"
            :src="item.url"
            :preview-src-list="item.srcList"
            :fit="fits[2]"
          ></el-image>
        </div>
      </div>
      <div class="item-info">
        <div class="block">
          <h1 class="text-3xl font-bold text-left p-4 bg-blue-300 rounded-lg">
            {{ item.name }}
          </h1>
          <div class="num flex m-4 bg-gray-300 rounded-sm">
            <p class="text-base" style="padding-right: 0">编号：#</p>
            <p class="text-base text-red-700" style="padding: 0 0.3rem">
              {{ item.numbering }}
            </p>
            <p style="padding-left: 0">/{{ item.num }}</p>
            <a
              class="other text-blue-700 text-base"
              @click="toGroup(item.group)"
              >选择其他编号</a
            >
          </div>

          <div class="info flex">
            <div class="author">
              <p class="text-gray-400">作者</p>
              <p>{{ item.author }}</p>
            </div>
            <div class="nowNum">
              <p class="text-gray-400">现存数量</p>
              <p>{{ item.num }}</p>
            </div>
            <div class="nowNum">
              <p class="text-gray-400">拥有者</p>
              <p>{{ item.ownerName }}</p>
            </div>
          </div>

          <div class="price">
            <h1 class="text-3xl font-blod text-blue-700 text-left px-4 py-4">
              ￥{{ item.price }}
            </h1>
          </div>
          <div
            class="buy"
            :class="{ none: item.itemState == false ? true : false }"
          >
            <button
              class="text-xl px-4 py-2 bg-blue-300 rounded-lg my-4 hover:bg-blue-700 hover:text-white"
              @click="getPurse()"
            >
              {{ buttonState }}
            </button>
          </div>
          <div class="has m-4 rounded-sm p-4 rounded-lg">
            <div class="flex">
              <p class="text-gray-500">合约地址：</p>
              <p class="text-font-color">{{ item.hasaddress }}</p>
            </div>
            <div class="flex">
              <p class="text-gray-500">合约编号：</p>
              <p class="text-font-color">{{ item.hasid }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="introduce">
      <div class="title">
        <h1 class="text-xl font-bold text-left">作品详情</h1>
        <div class="content">
          <p>{{ item.introduce }}</p>
        </div>
      </div>
      <div class="content"></div>
      <div class="title">
        <h1 class="text-xl font-bold text-left">关于数字藏品</h1>
        <div class="content">
          <p>
            数字藏品可以通俗理解为区块链凭证。通常是指开发者在以太坊平台上根据ERC721标准/协议所发行，特性为不可分割、不可替代、独一无二。数字藏品常见于文化艺术品领域、知识产权的链上发行、流转、确权等作用，能有效保护链上知识产权，防止篡改、造假等，是区块链技术的一类场景应用。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      fits: ["fill", "contain", "cover", "none", "scale-down"],
      item: {
        name: "ZERTO",
        url: "https://imgbed.link/file/15729",
        numbering: 0,
        num: 0,
        author: "ZEROT",
        nowNum: 0,
        price: 0,
        group: null,
        ownerName: "ZERTO",
        srcList: ["https://imgbed.link/file/15729"],
        introduce: "",
        itemState: "",
      },
      order: {
        orderId: null,
        orderSeller: null,
        orderBuyer: null,
        orderPayer: null,
        orderPayment: null,
        orderMoney: null,
        orderItem: null,
        orderNumbering: null,
        orderTime: null,
        orderState: null,
      },
      purse: null,
      buttonState: "未寄售",
    };
  },
  methods: {
    getItem(value) {
      console.log(value);
      this.$axios
        .postInfo("/item", value)
        .then((res) => {
          let getItem = res.item;
          this.item = Object.assign(this.item, getItem);
          this.item.price= this.item.price==0?getItem.iprice:getItem.price;
          this.item.srcList[0] = this.item.url;
          this.item.itemState = getItem.itemstate == 0 ? false : true;
          this.buttonState = getItem.itemstate == false ? "未寄售" : "立即购买";
          console.log(this.item);
          
          return this.$taxios.postInfo("/getUserInfo", {
            token: this.$cookies.get("token"),
          });
        })
        .then((res) => {
          if (this.item.owner == res.userInfo.username) {
            this.buttonState =
            this.item.itemState == false ? "未寄售" : "已寄售";
            this.item.itemState = false;
          }
        });
    },
    // 判断用户
    isSeller() {
      this.$taxios.postInfo("/getUserInfo", {
        token: this.$cookies.get("token"),
      });
    },
    toGroup(value) {
      // console.log(value)
      this.$router
        .push({
          path: "group",
          query: { itemsId: value, itemstate: 1 },
        })
        .then((res) => {});
    },
    getPurse() {
      this.$taxios.postInfo("/getPurse").then((res) => {
        let state = res.state;
        console.log(res);
        if (state == 1) {
          this.purse = res.purse;
          this.buy();
        } else {
          this.open();
        }
      });
    },
    buy() {
      this.$axios
        .postInfo("/item", {
          group: this.item.group,
          numbering: this.item.numbering,
          itemState: this.item.itemState,
        })
        .then((res) => {
          console.log(res);
          let getItem = res.item;
          this.item = Object.assign(this.item, getItem);
          this.item.itemState = getItem.itemstate == 0 ? false : true;
          console.log(getItem);
          console.log(this.order.orderId);
          this.order.orderSeller = getItem.owner;
          this.order.orderPayment = null;
          this.order.orderMoney = getItem.price;
          this.order.orderItem = getItem.group;
          this.order.orderNumbering = getItem.numbering;
          this.order.orderTime = null;
          this.order.orderState = null;
          console.log(this.order);
          return this.$taxios.postInfo("/getUserInfo", {
            token: this.$cookies.get("token"),
          });
        })
        .then((res) => {
          this.order.orderBuyer = res.userInfo.username;
          this.order.orderPayer = res.userInfo.name;
          this.$router.push({ path: "/buyItem", query: this.order });
        });
    },
    open() {
      this.$confirm("未开通钱包", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "前往开通钱包",
        cancelButtonText: "放弃开通",
        beforeClose: (action, instance, done) => {
          console.log(action);
          if (action == "confirm") {
            done();
            this.$router.push("/mine/paymant");
          } else {
            done();
          }
        },
      })
        .then(() => {
          this.$message.promptBox("跳转到支付管理");
        })
        .catch((action) => {
          this.$message.promptBox("放弃开通钱包");
        });
    },
  },
  created() {
    let query = this.$route.query;
    this.getItem(query);
  },
};
</script>
<style  lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  margin-top: 100px;
  padding: 1rem;
  @apply bg-blue-50;

  .item-con {
    position: relative;
    width: 90%;
    height: auto;
    min-height: 500px;
    background: #fff;
    box-shadow: 0 2px 16px 0 hsl(0deg 0% 71% / 40%);
    border-radius: 4px;
    padding: 3rem;
    box-sizing: content-box;

    .item-img {
      position: relative;
      width: 50%;
      padding: 1rem;

      .block {
        position: relative;
        z-index: 3;
        height: 100%;

        /deep/ .el-iamge {
          height: 100%;
        }
      }
    }

    .item-img::before {
      content: "";
      position: absolute;
      top: 1.5%;
      left: 0%;
      width: 10%;
      height: 4%;
      @apply bg-blue-300;
    }

    .item-img::after {
      content: "";
      position: absolute;
      top: 1.5%;
      right: 0%;
      width: 10%;
      height: 4%;
      @apply bg-blue-300;
      z-index: 1;
    }

    .item-info {
      position: relative;
      width: 50%;
      padding: 1rem;

      .num {
        p {
          padding-right: 0.3rem;
          padding-left: 1rem;
        }
      }

      .info {
        border-bottom: 1px solid rgba(128, 128, 128, 0.2);
        padding: 1rem;
        align-items: flex-start;
        flex-wrap: wrap;

        div {
          position: relative;
          padding: 0.2rem 1rem;
        }

        div::after {
          content: "";
          position: absolute;
          right: 0%;
          top: 40%;
          width: 1px;
          height: 60%;
          @apply bg-gray-300;
        }
      }
      .has {
        border: 1px solid gray;

        div {
          margin: 0.4rem 0;
          justify-content: space-between;
          p {
            font-size: 0.75rem;
          }
        }
      }
      .block {
        .buy {
          width: 100%;
          display: flex;
          justify-content: center;

          button {
            width: 100%;
            max-width: 300px;
            height: 100%;
          }
        }

        .none {
          button {
            pointer-events: none;
            background: #cccccc;
          }
        }
      }
    }
  }

  .introduce {
    position: relative;
    width: 85%;
    display: flex;
    flex-direction: column;
    align-items: center;

    h1 {
      text-indent: 0%;
    }

    .title {
      width: 90%;
      padding: 1rem 0;
    }

    p {
      padding-left: 0%;
      text-align: left;
      @apply text-gray-500;
      @apply text-sm;
    }
  }

  .el-dialog__wrapper {
    /deep/ .el-dialog {
      width: 400px;

      .el-form-item {
        text-align: left;

        span {
          // text-align: left;
        }
      }

      .el-input__icon {
        width: auto;
      }

      .el-dialog__footer {
      }
    }
  }

  .dialog-footer {
    .el-button {
      color: black;
    }

    .el-button:hover {
      background: #409eff;
    }
  }
}
</style>